<template>
	<view class="content">
		<view class="seachline">
			<image src="@/static/back.png" class="back"></image>
			<image src="@/static/Search.png" class="inputIcon"></image>
			<input class="input" confirm-type="search" placeholder="限时秒杀" />
			<button class="searBtn">搜索</button>
		</view>
		<view class="history">
			<view class="titleLine">
				<text class="title">历史记录</text>
				<image class="right trash" src="@/static/trash.png"></image>
			</view>
			<view class="histories">
				<view class="hisItem">香蕉</view>
				<view class="hisItem">苹果</view>
				<view class="hisItem">水蜜桃</view>
			</view>
		</view>
		<view class="hot">
			<view class="titleLine">
				<text class="title">近期热搜</text>
				<view class="right">
					<image src="@/static/refresh.png" class="refresh"></image>
					<text>换一换</text>
				</view>
			</view>
			<view class="hots">
				<view class="hotItem">限时秒杀</view>
				<view class="hotItem">夏季水果</view>
				<view class="hotItem">买一赠一</view>
				<view class="hotItem">午后休闲</view>
				<view class="hotItem">时令水果</view>
			</view>
		</view>
		<view class="like">
			<view class="titleLine">
				<text class="title">猜你喜欢</text>
				<view class="right">
					<image src="@/static/refresh.png" class="refresh"></image>
					<text>不喜欢</text>
				</view>
			</view>
			<view class="likes">
				<view class="likItem">
					<image class="itemPic" src="@/static/item1.png"></image>
					<view class="itemTitle">
						<text>茂谷柑【中】1份/约440g</text>
					</view>
					<view class="itemInfo">皮薄多汁 解渴润喉 全身是宝</view>
					<image class="tagPic" src="@/static/tag.png"></image>
					<view class="noPrice">￥39.9</view>
					<view class="price">￥35.9</view>
					<button class="itemBtn">选规格</button>
				</view>
				<view class="likItem">
					<image class="itemPic" src="@/static/item1.png"></image>
					<view class="itemTitle">
						<text>茂谷柑【中】1份/约440g</text>
					</view>
					<view class="itemInfo">皮薄多汁 解渴润喉 全身是宝</view>
					<image class="tagPic" src="@/static/tag2.png"></image>
					<view class="noPrice">￥39.9</view>
					<view class="price">￥35.9</view>
					<button class="itemBtn">选规格</button>
				</view>
			</view>
			
		</view>
	</view>
	<view class="voice">
		<image src="@/static/voice.png" class="voicePic"></image>
	</view>
</template>

<script setup lang="ts">
	
</script>

<style scoped>
.content{
	width: 100vw;
	height: 105vh;
	box-sizing: border-box;
	padding: 32rpx;
	background: linear-gradient(to bottom, #FBF9F5 10%, #fff 10% 90%);
}
.seachline{
	width: 100%;
	height:66rpx;
	position: relative;
	display: inline-block;
}
.input{
	height: 100%;
	border-radius: 44rpx;
	background-color: #fff;
	padding: 0 146rpx 0 78rpx;
	position: absolute;
	top: 0;
	left:28rpx;
}
.inputIcon{
	width: 36rpx;
	height: 36rpx;
	top: 16rpx;
	left:58rpx;
	position: absolute;
	z-index: 1;
}
.back{
	width: 27rpx;
	height: 27rpx;
	position: absolute;
	top: 16rpx;
	left:0;
}
.searBtn{
	width: 140rpx;
	height: 60rpx;
	background: linear-gradient(to bottom right, #FF8041 0%, #FFCB42 100%);
	color: #fff;
	position: absolute;
	top: 6rpx;
	right:6rpx;
	line-height: 60rpx;
	border-radius: 44rpx;
}
.history{
	width: 100%;
	height: 194rpx;
	margin-top: 66rpx;
}
.titleLine{
	width: 100%;
	height: 44rpx;
	margin-bottom: 24rpx;
}
.title{
	font-size: 30rpx;
	line-height: 44rpx;
	font-weight: 700;
}
.right{
	float: right;
}
.trash,.refresh{
	width: 28rpx;
	height: 28rpx;
}
.histories{
	width: 100%;
	height: 150rpx;
}
.hisItem,.hotItem{
	width: 114rpx;
	height: 44rpx;
	border-radius: 26rpx;
	background-color: #EEEEEE;
	color: #626262;
	text-align: center;
	margin-right: 20rpx;
	margin-bottom: 26rpx;
	display: inline-block;
}
.hot{
	width: 100%;
	height: 258rpx;
	margin-top: 66rpx;
}
.hots{
	width: 100%;
	height: 150rpx;
}
.refresh{
	margin-right: 6rpx;
}
.right text{
	font-size: 28rpx;
	color: #626262;
}
.hotItem{
	width: 160rpx;
	color: #FA5848;
	background-color: #FEECE8;
}
.like{
	width: 100%;
	height: 700rpx;
	margin-top: 66rpx;
}
.likes{
	width: 100%;
	height:634rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.likItem{
	width: 338rpx;
	height:630rpx;
	position: relative;
	background-color:#fff;
	border-radius: 16rpx;
	border: 3rpx solid #eee;
}
.itemPic{
	width: 238rpx;
	height: 244rpx;
	position: absolute;
	top: 30rpx;
	left: 36rpx;
}
.itemTitle{
	width: 308rpx;
	height: 80rpx;
	position: absolute;
	top: 340rpx;
	left: 16rpx;
}
.itemTitle text{
	color: #000000;
	font-size: 30rpx;
	line-height: 40rpx;
}
.itemInfo{
	color: #8C8C8C;
	font-size: 20rpx;
	line-height: 30rpx;
	height: 30rpx;
	width: 284rpx;
	position: absolute;
	bottom: 172rpx;
	left: 16rpx;
}
.tagPic{
	width: 178rpx;
	height: 30rpx;
	position: absolute;
	bottom: 136rpx;
	left: 16rpx;
}
.noPrice{
	color: #858685;
	font-size: 32rpx;
	text-decoration: line-through;
	height: 34rpx;
	width: 284rpx;
	line-height: 34rpx;
	position: absolute;
	bottom: 96rpx;
	left: 16rpx;
}
.price,.price2{
	color: #F64F5F;
	font-size: 36rpx;
	height: 38rpx;
	width: 284rpx;
	line-height: 38rpx;
	position: absolute;
	bottom: 54rpx;
	left: 16rpx;
}
.price2{
	bottom: 60rpx;
	left: 16rpx;
}
.itemBtn{
	width: 116rpx;
	height: 44rpx;
	border-radius: 22rpx;
	color: #fff;
	background-color: #F6954E;
	position: absolute;
	bottom: 62rpx;
	right: 16rpx;
	font-size: 19rpx;
}
.voice{
	display: block;
	width: 100%;
	height: 80rpx;
	background-color: #FBF9F5;
}
.voicePic{
	display: block;
	margin: 0 auto;
	width: 80rpx;
	height: 80rpx;
}
</style>
